<template>
  <div>
    <el-card shadow="never" class="mb20">
      <el-form :model="form" :label-position="labelPosition" label-width="100">
        <el-tabs class="person-tabs" :tab-position="tabPosition">
          <el-tab-pane label="基本信息">
            <el-row :gutter="24" class="pl100">
              <el-col>
                <h2>基本信息</h2>
              </el-col>
              <el-col>
                <el-form-item label="员工号：">
                  <el-input :style="inputWidth" v-model="form.employeeId" :readOnly="true" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="姓名：">
                  <el-input :style="inputWidth" v-model="form.name" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="性别：">
                  <el-radio-group @change="handleUpdate" v-model="form.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="出生年月：">
                  <el-date-picker
                    type="date"
                    :style="inputWidth"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    v-model="form.birth"
                    @change="handleUpdate"
                    placeholder="请选择"
                  />
                  <!-- <el-input :style="inputWidth" v-model="form.birth" @blur="handleUpdate" /> -->
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="民族：">
                  <el-input :style="inputWidth" v-model="form.nation" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="职称：">
                  <el-input :style="inputWidth" v-model="form.jobTitle" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="国籍：">
                  <el-input :style="inputWidth" v-model="form.country" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="籍贯：">
                  <el-input :style="inputWidth" v-model="form.nativePlace" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="政治面貌：">
                  <el-input
                    :style="inputWidth"
                    v-model="form.politicalStatus"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="身份证号：">
                  <el-input :style="inputWidth" v-model="form.idCard" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="联系方式">
            <el-row :gutter="24" class="pl100">
              <el-col>
                <h2>联系方式</h2>
              </el-col>
              <el-col>
                <el-form-item label="手机号：">
                  <el-input :style="inputWidth" v-model="form.phone" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="工作电话：">
                  <el-input :style="inputWidth" v-model="form.workTel" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="家庭电话：">
                  <el-input :style="inputWidth" v-model="form.familyTel" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="联系地址：">
                  <el-input :style="inputWidth" v-model="form.address" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="QQ:">
                  <el-input :style="inputWidth" v-model="form.qq" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="微信：">
                  <el-input :style="inputWidth" v-model="form.wechat" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="Email:">
                  <el-input :style="inputWidth" v-model="form.email" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="紧急联系人:">
                  <el-input
                    :style="inputWidth"
                    v-model="form.emergencyPerson"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="紧急联系人关系:">
                  <el-input
                    :style="inputWidth"
                    v-model="form.emergencyRelation"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="紧急联系人电话:">
                  <el-input :style="inputWidth" v-model="form.emergencyTel" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="组织信息">
            <el-row :gutter="24" class="pl100">
              <el-col>
                <h2>组织信息</h2>
              </el-col>
              <el-col>
                <el-form-item label="入职日期：">
                  <el-date-picker
                    type="date"
                    :style="inputWidth"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    v-model="form.onboardingDate"
                    @change="handleUpdate"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="转正日期：">
                  <el-date-picker
                    type="date"
                    :style="inputWidth"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    v-model="form.qualifyDate"
                    @change="handleUpdate"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="第一学历：">
                  <el-input :style="inputWidth" v-model="form.firstEdu" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业院校(第一)：">
                  <el-input :style="inputWidth" v-model="form.firstSchool" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="专业(第一)：">
                  <el-input
                    :style="inputWidth"
                    v-model="form.firstSpeciality"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业时间(第一)：">
                  <el-input :style="inputWidth" v-model="form.firstGradeDate" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业证照(第一)：">
                  <el-input :style="inputWidth" v-model="form.firstImage" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="第二学历：">
                  <el-input :style="inputWidth" v-model="form.secondEdu" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业院校(第二)：">
                  <el-input :style="inputWidth" v-model="form.secondSchool" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="专业(第二)：">
                  <el-input
                    :style="inputWidth"
                    v-model="form.secondSpeciality"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业时间(第二)：">
                  <el-input
                    :style="inputWidth"
                    v-model="form.secondGradeDate"
                    @blur="handleUpdate"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="毕业证照(第二)：">
                  <el-input :style="inputWidth" v-model="form.secondImage" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="薪资信息">
            <el-row :gutter="24" class="pl100">
              <el-col>
                <h2>薪资信息</h2>
              </el-col>
              <el-col>
                <el-form-item label="开户行：">
                  <el-input :style="inputWidth" v-model="form.bank" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="开户网点：">
                  <el-input :style="inputWidth" v-model="form.bankSite" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="账号：">
                  <el-input :style="inputWidth" v-model="form.wageId" @blur="handleUpdate" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="修改密码">
            <el-row :gutter="24" class="pl100">
              <el-col>
                <el-form-item label="新密码：">
                  <el-input :style="inputWidth" placeholder="请输入新密码" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="再次输入新密码：">
                  <el-input :style="inputWidth" placeholder="请再次输入密码" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item>
                  <el-button type="primary">修改</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>

    <el-form :model="form" label-width="100">
      <!-- <el-card shadow="never" class="mb20">
        <div slot="header">基本信息</div>
        <el-row :gutter="16">
          <el-col>
            <el-form-item label="员工号：">{{ form.employeeId }}</el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="姓名：">{{ form.name }}</el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="性别：">{{ form.sex === 0 ? '男' : '女' }}</el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="出生年月：">
              <span>{{ form.birth }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="民族：">
              <span>{{ form.nation }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="职称：">
              <span>{{ form.jobTitle }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="国籍：">
              <span>{{ form.country }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="籍贯：">
              <span>{{ form.nativePlace }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="政治面貌：">
              <span>{{ form.politicalStatus }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="身份证号：">
              <span>{{ form.idCard }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" class="mb20">
        <div slot="header">联系方式</div>
        <el-row :gutter="16">
          <el-col>
            <el-form-item label="手机号：">
              <span>{{ form.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="工作电话：">
              <span>{{ form.workTel }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="家庭电话：">
              <span>{{ form.familyTel }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="联系地址：">
              <span>{{ form.address }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="QQ:">
              <span>{{ form.qq }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="微信：">
              <span>{{ form.wechat }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="Email:">
              <span>{{ form.email }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="紧急联系人:">
              <span>{{ form.emergencyPerson }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="紧急联系人关系:">
              <span>{{ form.emergencyRelation }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="紧急联系人电话:">
              <span>{{ form.emergencyTel }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" class="mb20">
        <div slot="header">组织信息</div>
        <el-row :gutter="16">
          <el-col>
            <el-form-item label="入职日期：">
              <span>{{ form.onboardingDate }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="转正日期：">
              <span>{{ form.qualifyDate }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="第一学历：">
              <span>{{ form.firstEdu }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业院校(第一)：">
              <span>{{ form.firstSchool }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="专业(第一)：">
              <span>{{ form.firstSpeciality }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业时间(第一)：">
              <span>{{ form.firstGradeDate }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业证照(第一)：">
              <span>{{ form.firstImage }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="第二学历：">
              <span>{{ form.secondEdu }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业院校(第二)：">
              <span>{{ form.secondSchool }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="专业(第二)：">
              <span>{{ form.secondSpeciality }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业时间(第二)：">
              <span>{{ form.secondGradeDate }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="毕业证照(第二)：">
              <span>{{ form.secondImage }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" class="mb20">
        <div slot="header">薪资信息</div>
        <el-row :gutter="16">
          <el-col>
            <el-form-item label="开户行：">
              <span>{{ form.bank }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="开户网点：">
              <span>{{ form.bankSite }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="账号：">
              <span>{{ form.wageId }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>-->
    </el-form>
  </div>
</template>

<script>
import { userInfo, infoUpdate } from '@/api/auth'
import { getUserInfo } from '@/api/archives'
export default {
  props: ['userId'],
  data() {
    return {
      tabPosition: 'left',
      labelPosition: 'top',
      userInfo: this.$store.getters.userInfo,
      form: {},
      inputWidth: {
        width: '40%'
      }
    }
  },
  watch: {
    userId(n, o) {
      debugger
      if (n && n !== o) {
        this.getUserInfo()
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const userId = this.userId || this.userInfo.userId
      getUserInfo(userId, {}).then(res => {
        this.form = Object.assign({}, res.data)
        console.log('userInfo', res)
      })
    },
    handleUpdate() {
      infoUpdate(this.form).then(res => {
        console.log('update res', res)
      })
    }
  }
}
</script>

<style scoped>
.person-tabs >>> .el-tabs__item {
  width: 220px;
  text-align: left;
}
.pl100 {
  padding-left: 100px;
}
</style>